<template>
    <view class="release-dynamic-container">
        <header-vue :back="true" title="发布闲置" :backUrl="'/views/community/release'"></header-vue>
        <view class="release-dynamic-box">
            <view class="title">
                <input type="text" placeholder="标题" v-model="title">
            </view>
            <view class="editor">
                <textarea 
                    v-model="desc"
                    :maxlength="maxLen"
                    placeholder="描述一下你要出售的宝贝"
                    class="editor-textarea"
                    @input="onDescInput"
                />
                <view class="counter">{{ desc.length }}/{{ maxLen }}</view>
            </view>
            
            <view class="uploader">
                <view class="thumb" v-for="(img, idx) in images" :key="img.id">
                    <image :src="img.path" mode="aspectFill" class="thumb-img"></image>
                    <view class="thumb-del" @click="removeImage(idx)">×</view>
                </view>
                <view class="add-tile" v-if="images.length < maxImages" @click="chooseImage">
                    <view class="camera-icon">
                        <u-icon name="camera" size="30" color="#666"></u-icon>
                    </view>
                    <text class="add-text">上传照片</text>
                </view>
            </view>
        </view>
        <view class="con-box">
            <textarea 
                v-model="content"
                :maxlength="maxLen"
                placeholder="请输入闲置说明"
                class="con-textarea"
                @input="onContentInput"
            />
            <view class="con-counter">{{ content.length }}/{{ maxLen }}</view>
        </view>
        <view class="shop-box">
            <view class="shop-item">
                <view class="item-left">价格模式</view>
                <view class="item-right">
                    <u-radio-group v-model="priceMode" shape="circle">
                        <u-radio :name="1" label="一口价" labelSize="26rpx" iconSize="24rpx" size="24rpx"></u-radio>
                        <u-radio :name="2" label="砍价模式" labelSize="26rpx" iconSize="24rpx" size="24rpx" class="ml24"></u-radio>
                    </u-radio-group>
                </view>
            </view>
            <view class="shop-item">
                <view class="item-left">发货方式</view>
                <view class="item-right">
                    <u-radio-group v-model="shippingMethod" shape="circle">
                        <u-radio :name="1" label="上门配送" labelSize="26rpx" iconSize="24rpx" size="24rpx"></u-radio>
                        <u-radio :name="2" label="线下" labelSize="26rpx" iconSize="24rpx" size="24rpx" class="ml24"></u-radio>
                    </u-radio-group>
                </view>
            </view>
            <view class="shop-item" @click="showFreightPicker = true">
                <view class="item-left">运费模板</view>
                <view class="item-right arrow">
                    <text class="hint">{{ freightTemplateText }}</text>
                    <u-icon name="arrow-right" color="#999" size="22rpx"></u-icon>
                </view>
            </view>
            <view class="shop-item">
                <view class="item-left">价格</view>
                <view class="item-right">
                    <input class="price-input" v-model="price" type="number" placeholder="请输入价格"/>
                </view>
            </view>
        </view>
        <footer-vue>
            <view class="confirm-btn" @click="postIdlePublishEvent">确认发布</view>
        </footer-vue>
        <u-picker
            :show="showFreightPicker"
            :columns="[freightTemplates.map(t => t.title)]"
            @confirm="onFreightConfirm"
            @cancel="showFreightPicker = false"
        ></u-picker>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue';
import footerVue from '@/components/fixed-footer/index.vue';
import { postUploadNow, postIdlePublish, getIdleTransportTemplates } from '@/api/index.js'
import { title } from 'process';
export default {
    name: 'release-dynamic',
    components: {
        headerVue,
        footerVue
    },
    data() {
        return {
            title:'',
            desc:'',
            content: '',
            maxLen: 1000,
            images: [],
            maxImages: 9,
            nextId: 1,
            // 商品设置
            priceMode: 1,
            shippingMethod: 1,
            showFreightPicker: false,
            freightTemplates: [],
            selectedFreightId: null,
            price: ''
        }
    },
    onLoad() {
        this.getIdleTransportTemplatesEvent()
    },
    computed: {
        freightTemplateText() {
            if (!this.freightTemplates || this.freightTemplates.length === 0) return '请选择'
            const found = this.freightTemplates.find(t => t.id === this.selectedFreightId)
            return found ? found.title : '请选择'
        }
    },
    methods: {
        async getIdleTransportTemplatesEvent() {
            const res = await getIdleTransportTemplates()
            this.freightTemplates = Array.isArray(res.data) ? res.data : []
            if (this.freightTemplates.length > 0) {
                // 默认选中第一项
                this.selectedFreightId = this.freightTemplates[0].id
            }
        },
        onDescInput() {
            if (this.desc.length > this.maxLen) {
                this.desc = this.desc.slice(0, this.maxLen)
            }
        },
        onContentInput() {
            if (this.content.length > this.maxLen) {
                this.content = this.content.slice(0, this.maxLen)
            }
        },
        chooseImage() {
            const remaining = this.maxImages - this.images.length
            if (remaining <= 0) return
            const that = this
            uni.chooseImage({
                count: remaining,
                sizeType: ['compressed'],
                sourceType: ['album','camera'],
                success(res) {
                    const files = (res.tempFiles || [])
                    files.forEach((item) => {
                        that.images.push(item)
                    })
                }
            })
        },
        removeImage(index) {
            this.images.splice(index, 1)
        },
        onFreightConfirm(e) {
            const index = e.indexs ? e.indexs[0] : 0
            const tpl = this.freightTemplates[index]
            this.selectedFreightId = tpl ? tpl.id : null
            this.showFreightPicker = false
        },
        async postIdlePublishEvent() {
            if (!this.title) {
                uni.showToast({ title: '请输入标题', icon: 'none' })
                return
            }
            if (!this.desc) {
                uni.showToast({ title: '请输入详情', icon: 'none' })
                return
            }
            if (!this.content) {
                uni.showToast({ title: '请输入内容', icon: 'none' })
                return
            }
            uni.showLoading()
            let images = []
            for (const item of this.images) {
                const res = await postUploadNow(item.path)
                const data = JSON.parse(res.data)
                if (data.errno == 0) {
                    images.push(data.url)
                }
            }
            const res = await postIdlePublish({
                title: this.title,
                desc: this.desc,
                content: this.content,
                images: images,
                price_mode: this.priceMode,
                delivery_type: this.shippingMethod,
                transport_template_id: this.selectedFreightId,
                price: this.price
            })
            if (res.errno == 0) {
                uni.showToast({ title: '发布成功', icon: 'none' })
                uni.redirectTo({
                    url: '/views/community/success'
                })
            } else {
                uni.showToast({ title: res.msg || '发布失败！' })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.release-dynamic-container {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
}
.release-dynamic-box {
    width: 100%;
    height: 100%;
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    background: #fff;
}
.release-dynamic-item {
    width: 100%;
}
.release-dynamic-item-title {
    margin-bottom: 16rpx;

    text {
        font-size: 30rpx;
        color: #333;
        font-weight: 500;
    }
}
.title {
    font-size: 32rpx;
    color: #666666;
}
.con-box {
    position: relative;
    background: #fff;
    padding: 20rpx 32rpx;
    margin-top: 20rpx;
    height: 300rpx;
}

.con-textarea {
    width: 100%;
    height: 300rpx;
    font-size: 28rpx;
    color: #333;
}

.con-counter {
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    color: #999;
    font-size: 24rpx;
    background: #FFFFFF;
}

.editor {
    position: relative;
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx 0;
    height: 500rpx;
}
.editor-textarea {
    width: 100%;
    height: 500rpx;
    font-size: 28rpx;
    color: #333;
}
.counter {
    position: absolute;
    right: 20rpx;
    bottom: 0;
    color: #999;
    font-size: 24rpx;
    background: #FFFFFF;
}
.uploader {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24rpx;
}
.thumb {
    position: relative;
    width: 148rpx;
    height: 160rpx;
    border-radius: 4rpx;
    overflow: hidden;
    margin-right: 25rpx;
    margin-bottom: 20rpx;
}
.thumb:nth-child(4n) {
    margin-right: 0;
}
.thumb-img {
    width: 100%;
    height: 100%;
    display: block;
}
.thumb-del {
    position: absolute;
    right: 6rpx;
    top: 6rpx;
    width: 20rpx;
    height: 20rpx;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 50%;
    font-size: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.add-tile {
    width: 148rpx;
    height: 160rpx;
    border-radius: 4rpx;
    background: #F8F8F8;
    border: 2rpx dashed #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #999;
}
.camera-icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12rpx;
}
.add-text {
    font-size: 24rpx;
    color: #999;
}
.confirm-btn {
    width: 100%;
    height: 76rpx;
    background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    font-size: 36rpx;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* shop area */
.shop-box {
    margin-top: 24rpx;
    background: #FFFFFF;
    overflow: hidden;
    padding-bottom: 180rpx;
}
.shop-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 32rpx;
    border-bottom: 1rpx solid #F0F0F0;
    background: #FFFFFF;
}
.shop-item:last-child { border-bottom: none; }
.item-left { font-size: 26rpx; color: #666; }
.item-right { display: flex; align-items: center; justify-content: flex-end; gap: 24rpx; }
.item-right.arrow { color: #999; }
.hint { color: #C0C0C0; margin-right: 8rpx; font-size: 26rpx; }
.ml24 { margin-left: 32rpx; }
.price-input { text-align: right; font-size: 28rpx; color: #333; }
.price-input::placeholder { color: #C0C0C0; }
</style>